<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="hint">
        <view class="t">
          <image class="image" src="../../../../static/images/emterpriseLogout/error.png"
            mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
          <view class="desc"> 注销当前账号 </view>
        </view>

        <view class="b"> 开始注销前，请确认以下内容 </view>
      </view>

      <view class="conBox">
        <view class="top">
          <view class="icon" />
          <view class="desc"> 账号无任何资产 </view>
        </view>
        <view class="b"> 账号资产包括但不限于积分、薪酬余额等 </view>
      </view>
      <view class="conBox">
        <view class="top">
          <view class="icon" />
          <view class="desc"> 账号处于安全状态 </view>
        </view>
        <view class="b">
          在最近3个月无异常登录记录，并且账号无修改密码、手机号码等敏感操作
        </view>
      </view>
      <view class="conBox">
        <view class="top">
          <view class="icon" />
          <view class="desc"> 账号将不可找回 </view>
        </view>
        <view class="b">账号注销后，账号绑定手机、邮箱等相关信息将被释放，账号将无法登录
        </view>
      </view>

      <view class="btn" @click="confirm"> 开始注销 </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "账号注销",
      },

      items: [],
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  methods: {
    toPath(path) {
      if (path === "") return;

      uni.navigateTo({
        url: `/${path}`,
      });
    },
    isLastItem(index) {
      return index === this.items.length - 1;
    },

    confirm() {
      uni.navigateTo({
        url: "/pages/recruit/mine/confirmCancellation/index"
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32rpx;

    .hint {
      margin: 80rpx 0 64rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .t {
        display: flex;

        .image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 12rpx;
          margin-bottom: 16rpx;
        }

        .desc {
          font-weight: 500;
          font-size: 40rpx;
          color: #333333;

          text-align: center;
          line-height: 48rpx;
        }
      }

      .b {
        width: 364rpx;
        height: 48rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;

        line-height: 48rpx;
      }
    }

    .conBox {
      height: 188rpx;
      background: #f9f9f9;
      border-radius: 24rpx;
      margin-bottom: 16rpx;

      .top {
        display: flex;
        height: 48rpx;
        align-items: center;
        padding-left: 32rpx;
        padding-top: 32rpx;

        .icon {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background: red;
          margin-right: 12rpx;
        }

        .desc {
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          letter-spacing: 0;
          line-height: 48rpx;
        }
      }

      .b {
        padding-left: 56rpx;
        padding-right: 30rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
        letter-spacing: 0;
        line-height: 48rpx;
      }
    }

    .btn {
      margin: 0 auto;
      margin-top: 160rpx;
      width: 420rpx;
      height: 88rpx;
      line-height: 88rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
    }
  }
}
</style>
